<template>
  <work-template v-model="detailForm" @submitOn="handleSubmit"
                 @closeSelectedTag="closeSelectedTag" :butShow="bool">
    <div slot="form" v-loading="loading">

      <!-- 基础信息-->
      <alterInfo v-model="detailForm"/>

      <!--保险变更信息-->
      <alterInsuranceNew v-model="detailForm" :state="isEdit" ref="alterInsurance"/>

      <!-- 备注-->
      <remark v-model="detailForm" :state="isEdit" ref="remark"/>

      <!--交强险信息-->
      <compulsoryTrafficTnsurance v-model="detailForm"/>

      <!--商业险信息-->
      <commerciaInsurance v-model="detailForm"/>

      <!--其他保险 -->
      <other v-model="detailForm"/>

    </div>
  </work-template>
</template>

<script>
import {getInsuranceChangeList, addInsuranceChange} from "@/api/bxgl/insureManageApi.js";

export default {
  name: 'InsuranceAlter',//保险变更
  components: {
    alterInfo: () => import('./components/alterInfo.vue'),//基础信息
    alterInsuranceNew: () => import('./components/alterInsuranceNew.vue'),//保险变更信息
    remark: () => import('./components/remark.vue'),//备注
    compulsoryTrafficTnsurance: () => import('./components/compulsoryTrafficTnsurance.vue'),//交强险信息
    commerciaInsurance: () => import('./components/commerciaInsurance.vue'),//商业险信息
    other: () => import('./components/other.vue'),//其他保险

  },
  computed: {
    isEdit() {
      if (this.$route.query.type === "edit") {
        return "write";
      }
      if (this.$route.query.type === "view") {
        return "readonly";
      }
    },
    bool() {
      if (this.$route.query.type === "edit") {
        return true;
      }
      if (this.$route.query.type === "view") {
        return false;
      }
    },
  },
  watch: {},
  data() {
    return {
      detailForm: {
        attachmentUrl: null,
        batchOrderOss: null,
        changeTime: null,
        contractNo: null,
        description: null,
        modelName: null,
        policyCode: null,
        remark: null,
        vinNo: null,
        insuranceVo: {
          businessList: []
        },
        changeList: []
      },
      loading: false
    };
  },
  created() {
    this.handleDetails()
  },
  mounted() {
  },
  methods: {
    //获取详情
    async handleDetails() {
      this.loading = true
      try {
        const res = await getInsuranceChangeList(this.$route.query.id)
        this.detailForm = res.data || {}
      } catch (e) {
        console.error('获取详情失败', e);
      } finally {
        this.loading = false
      }
    },

    handleSubmit() {
      let refList = [this.$refs.alterInsurance.handleEffect(), this.$refs.remark.handleEffect()];
      Promise.all(refList)
          .then(() => {
            const loading = this.$loading({
              lock: true,
              text: "保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            addInsuranceChange(this.detailForm).then(res => {
              if (res.code === 200) {
                loading.close()
                this.closeSelectedTag()
              }
            }).catch(() => {
              loading.close()
            })
          })
          .catch((e) => {
          });
    },

    closeSelectedTag() {
      this.$tab.closePage().then(({visitedViews}) => {
        this.$router.push({
          path: '/clgl/insurance/insureManageList'
        });
      });
    },
  }
};
</script>

<style scoped lang="">

</style>


